<template>
  <div class="map">
    <!-- 顶部开始 -->
        <van-row>
      <van-col span="4" id="sanjiao">
        <router-link to="/" class="city">武汉</router-link>
      </van-col>
      <van-col span="20">
        <van-search v-model="value" placeholder="想住哪儿?" />
      </van-col>
    </van-row>
        
    <!-- 顶部结束 -->
    <!-- 轮播图开始 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" style="width: 100%; height: 230px" />
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播图结束 -->
    <van-grid :border="false" :clickable="true">
      <van-grid-item icon="/images/map.png" text="地图找房"></van-grid-item>
      <van-grid-item icon="/images/fujin.png" text="附近门店"></van-grid-item>
      <van-grid-item icon="/images/qiye.png" text="企业优惠"></van-grid-item>
      <van-grid-item icon="/images/item.png" text="项目合作"></van-grid-item>
    </van-grid>
    <div class="huxing">
      <h3>优选户型</h3>
      <span>最好的户型, 给最特别的你</span>
      <p>查看更多 ></p>
      <ul class="slide-box">
        <li class="slide-item">
          <div class="img-items">
            <img src="http://vky-oss.inboyu.com/upload/39f25ddd-45b3-796e-b9ae-266ce833b309.png" />
          </div>
          <p>电梯阳台厨房大单床</p>
          <p class="price">
            <span>994.44-1555.56</span>
            元/月
          </p>
          <div class="biaq">
            <span>精致装修</span>
            <span>女孩的最爱</span>
          </div>
        </li>
        <li class="slide-item">
          <div class="img-items">
            <img src="http://vky-oss.inboyu.com/upload/39f25ddd-45b3-796e-b9ae-266ce833b309.png" />
          </div>
          <p>电梯阳台厨房大单床</p>
          <p class="price">
            <span>994.44-1555.56</span>
            元/月
          </p>
        </li>
        <li class="slide-item">
          <div class="img-items">
            <img src="http://vky-oss.inboyu.com/upload/39f25ddd-45b3-796e-b9ae-266ce833b309.png" />
          </div>
          <p>电梯阳台厨房大单床</p>
          <p class="price">
            <span>994.44-1555.56</span>
            元/月
          </p>
        </li>
        <li class="slide-item">
          <div class="img-items">
            <img src="http://vky-oss.inboyu.com/upload/39f25ddd-45b3-796e-b9ae-266ce833b309.png" />
          </div>
          <p>电梯阳台厨房大单床</p>
          <p class="price">
            <span>994.44-1555.56</span>
            元/月
          </p>
        </li>
        <li class="slide-item">
          <div class="img-items">
            <img src="http://vky-oss.inboyu.com/upload/39f25ddd-45b3-796e-b9ae-266ce833b309.png" />
          </div>
          <p>电梯阳台厨房大单床</p>
          <p class="price">
            <span>994.44-1555.56</span>
            元/月
          </p>
        </li>
      </ul>
    </div>
    <div class="huxing">
      <h3>附近门店</h3>
      <span>只生活,不漂泊,你值得一寓</span>
      <p>查看更多 ></p>
      <ul class="slide-box">
        <li class="slide-item1">
          <div class="img1-items">
            <img src="http://vky-oss.inboyu.com/upload/39f6bae2-a58a-33aa-6cb8-55985c6d2c4e.jpg" />
          </div>
          <p>泊寓-福田梅村地铁公社</p>
          <div class="flexss">
            <span>户型: 5个</span>
            <span class="price">
              <span>1398</span>
              元/月
            </span>
          </div>
        </li>
        <li class="slide-item1">
          <div class="img1-items">
            <img src="http://vky-oss.inboyu.com/upload/39f6bae2-a58a-33aa-6cb8-55985c6d2c4e.jpg" />
          </div>
          <p>泊寓-福田梅村地铁公社</p>
          <div class="flexss">
            <span>户型: 5个</span>
            <span class="price">
              <span>1398</span>
              元/月
            </span>
          </div>
        </li>
        <li class="slide-item1">
          <div class="img1-items">
            <img src="http://vky-oss.inboyu.com/upload/39f6bae2-a58a-33aa-6cb8-55985c6d2c4e.jpg" />
          </div>
          <p>泊寓-福田梅村地铁公社</p>
          <div class="flexss">
            <span>户型: 5个</span>
            <span class="price">
              <span>1398</span>
              元/月
            </span>
          </div>
        </li>
        <li class="slide-item1">
          <div class="img1-items">
            <img src="http://vky-oss.inboyu.com/upload/39f6bae2-a58a-33aa-6cb8-55985c6d2c4e.jpg" />
          </div>
          <p>泊寓-福田梅村地铁公社</p>
          <div class="flexss">
            <span>户型: 5个</span>
            <span class="price">
              <span>1398</span>
              元/月
            </span>
          </div>
        </li>
        <li class="slide-item1">
          <div class="img1-items">
            <img src="http://vky-oss.inboyu.com/upload/39f6bae2-a58a-33aa-6cb8-55985c6d2c4e.jpg" />
          </div>
          <p>泊寓-福田梅村地铁公社</p>
          <div class="flexss">
            <span>户型: 5个</span>
            <span class="price">
              <span>1398</span>
              元/月
            </span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 全部户型开始 -->
    <div class="huxing">
      <h3>全部户型</h3>
      <span>房子可以租,生活不将就</span>
      <p>查看更多 ></p>
      <div class="qb_hx">
        <div>
          <img src="http://vky-oss.inboyu.com/upload/39f6bae2-a58a-33aa-6cb8-55985c6d2c4e.jpg" />
          <p>电梯开间带厨房</p>
          <p class="price">
            <span>1049-2249</span>
            元/月
          </p>
        </div>
      </div>
    </div>
    <!-- 全部户型结束-->
    <!-- 帛友故事start -->
    <div class="huxing">
      <h3>泊友故事</h3>
      <span>大城小事,自己的故事</span>
      <p>查看更多 ></p>
      <div class="qb_hx">
        <div @click="story(item.boyu_yid)" v-for="(item, index) of boyou_story" :key="index">
          <img :src="item.boyu_img" />
          <p v-html="item.boyu_title"></p>
        </div>
      </div>
    </div>
    <!-- 帛友故事end -->
    <!-- <my-footer></my-footer> -->
  </div>
</template>
<script>
  // import myFooter from '../components/MyFooter.vue'
  export default {
    // components:{myFooter},
    data() {
      return {
        value: "",
        images: [
          "http://vky-oss.inboyu.com/upload/39e9f600-6b1d-3a23-2af5-13d48be74064.jpg",
          "http://vky-oss.inboyu.com/upload/39e9f600-ddfd-5c3f-cc26-58c1bfaab236.jpg",
          "http://vky-oss.inboyu.com/upload/39e9f603-9bf5-73a1-09af-558489f8d1cb.png",
        ],
        boyou_story: [],
      };
    },
    mounted() {
      this.axios.get("/boyu/boyou").then(res => {
        this.boyou_story = res.data.results;
      });

    },
    methods: {
      story(kw) {
        this.$router.push({
          path: '/story',
          query: {
            yid: kw
          }
        });
      }
    },
  };
</script>
<style scoped>
  .map {
    margin-bottom: 50px;
  }

  .city {
    display: block;
    text-align: center;
    line-height: 54px;
    font-weight: bold;
    color: black;
  }

  #sanjiao {
    background: url(/images/xiaosanjiao.png) no-repeat 12% 62%;
  }

  .huxing {
    padding-left: 20px;
    padding-right: 20px;
  }

  .huxing>h3 {
    margin-bottom: 5px;
  }

  .huxing>span {
    color: #666;
  }

  .huxing>p {
    font-size: 14px;
    color: #888;
    float: right;
    margin-top: -22px;
  }

  ul,
  li {
    list-style: none;
  }

  .slide-box {
    margin-top: 20px;
    display: -webkit-box;
    overflow-x: auto;
    /*适应苹果*/

    -webkit-overflow-scrolling: touch;
  }

  .slide-item {
    width: 210px;
    border: 1px solid #fff;
    margin-right: 15px;
    border-radius: 5px;
  }

  .slide-item>p {
    font-size: 14px;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 2px;
  }

  .price>span {
    color: burlywood;
  }

  .biaq {
    font-size: 12px;
  }

  .biaq>span {
    border: 0.1em solid #888;
    border-radius: 3px;
    margin-right: 5px;
    padding: 0 5px;
    color: #888;
  }

  .img-items>img {
    width: 210px;
    height: 130px;
    border-radius: 2%;
  }

  .slide-item1 {
    width: 315px;
    border: 1px solid #fff;
    margin-right: 15px;
    border-radius: 2%;
  }

  .slide-item1>p {
    font-size: 17px;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 2px;
  }

  .flexss {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #888;
  }

  .flexss>.price>span {
    color: burlywood;
    font-size: 18px;
  }

  .img1-items>img {
    width: 315px;
    height: 220px;
    border-radius: 2%;
  }

  /*隐藏掉滚动条*/
  .slide-box::-webkit-scrollbar {
    display: none;
  }

  .qb_hx {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .qb_hx div {
    flex: 0 0 47%;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .qb_hx img {
    width: 100%;
    border-radius: 5px;
  }

  .qb_hx p {
    margin-top: 3px;
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 600;
  }
</style>